<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

	<style type="text/css">
    
		body{ overflow:hidden; margin:0; padding:0; }
		#scrollContainer{ left:100px; top:100px; width:200px; height:400px; margin:0; padding:0; border:#CCC solid thin; }
		#scrollContainerH{ left:400px; top:100px; width:500px; height:80px; margin:0; padding:0; border:#CCC solid thin; position:absolute; overflow:hidden; }
		#scrollContainerH #contentsContainerH div{ float:left; }
    
    </style>

	<script src="../../js/jquery/jquery-1.7.2.min.js"></script>
    <script src="../../js/gs/TweenMax.js"></script>
    <script src="../com/ScrollComponentHorizontal.js"></script>
    <script src="../com/ScrollComponentVertical.js"></script>
    <script src="../com/NSImage.js"></script>
    <script type="text/javascript">
       <!--
        	
			
			window.onload = function()
			{
				
				var scrollBar, scrollContainer, contentsContainer, scrollComponent;
				
				scrollBar = new ScrollBarVertical( "../image/scrolltop.png", "../image/scrollbar.png", "../image/scrollbtm.png" );
				scrollContainer = document.getElementById("scrollContainer" );
				contentsContainer = document.getElementById("contentsContainer");
				scrollComponent = new ScrollComponentVertical( scrollContainer, contentsContainer, scrollBar );
				scrollComponent.apply();


				
				var el = document.createElement("div");
				el.innerHTML = "수동으로 추가한 엘리먼트";
				scrollComponent.addChild( el );
				
				
				scrollBar = new ScrollBarHorizontal( "../image/scrollleft.png", "../image/scrollbarh.png", "../image/scrollright.png" );
				scrollContainer = document.getElementById("scrollContainerH" );
				contentsContainer = document.getElementById("contentsContainerH");
				scrollComponent = new ScrollComponentHorizontal( scrollContainer, contentsContainer, scrollBar );
				
				scrollComponent.apply();

				
			}
			
       -->
    </script>
    
</head>

<body>

<div id="scrollContainer">
	<div id="contentsContainer">
    	<div>1111111111111111111</div>
        <div>2222222222222222222</div>
        <div>3333333333333333333</div>
        <div>4444444444444444444</div>
        <div>1111111111111111111</div>
        <div>2222222222222222222</div>
        <div>3333333333333333333</div>
        <div>4444444444444444444</div>
        <div>1111111111111111111</div>
        <div>2222222222222222222</div>
        <div>3333333333333333333</div>
        <div>4444444444444444444</div>
        <div>1111111111111111111</div>
        <div>2222222222222222222</div>
        <div>3333333333333333333</div>
        <div>4444444444444444444</div>
        <div>1111111111111111111</div>
        <div>2222222222222222222</div>
        <div>3333333333333333333</div>
        <div>4444444444444444444</div>
        <div>1111111111111111111</div>
        <div>2222222222222222222</div>
        <div>3333333333333333333</div>
        <div>4444444444444444444</div>
        <div>1111111111111111111</div>
        <div>2222222222222222222</div>
        <div>3333333333333333333</div>
        <div>4444444444444444444</div>
        <div>1111111111111111111</div>
        <div>2222222222222222222</div>
        <div>3333333333333333333</div>
        <div>4444444444444444444</div>
        <div>1111111111111111111</div>
        <div>2222222222222222222</div>
        <div>3333333333333333333</div>
        <div>4444444444444444444</div>
    </div>
</div>

<div id="scrollContainerH">
	<div id="contentsContainerH">
    	<div>11111 </div>
        <div>22222 </div>
        <div>33333 </div>
        <div>44444 </div>
        <div>11111 </div>
        <div>22222 </div>
        <div>33333 </div>
        <div>44444 </div>
        <div>11111 </div>
        <div>22222 </div>
        <div>33333 </div>
        <div>44444 </div>
        <div>11111 </div>
        <div>22222 </div>
        <div>33333 </div>
        <div>44444 </div>
        <div>11111 </div>
        <div>22222 </div>
        <div>33333 </div>
        <div>44444 </div>
        <div>11111 </div>
        <div>22222 </div>
        <div>33333 </div>
        <div>44444 </div>
    </div>
</div>
</body>
</html>
